<template>
	<div class="tpl-content-wrapper">
		<ol class="am-breadcrumb">
			<li><a href="#" class="am-icon-home">首页</a></li>
			<li><router-link :to="{name: 'BannerView'}">首页轮播图</router-link></li>
			<li class="am-active">{{id ? form.name : '新增轮播图'}}</li>
		</ol>
   <!--  <div class="tpl-portlet-components">
      <button @click="update" type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
    </div> -->

    <div class="am-panel am-panel-default">
      <div class="am-panel-hd">
        <span class="am-panel-title"  ><strong>基础信息</strong></span>
        <span class="color-999 am-text-xs am-kai" data-am-collapse="{target: '#do-not-say-1'}"> - 点击展开/折叠</span>
      </div>
      <div id="do-not-say-1" class="am-panel-collapse am-collapse am-in ">
        <div class="am-panel-bd tpl-amazeui-form">
          <!-- form -->
          <form id="form" action="" class="am-form">
            <div class="am-input-group">
              <span class="am-input-group-label am-kai">&nbsp;&nbsp;&nbsp;&nbsp;轮播图主题&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <input type="text" class="am-form-field" v-model="form.name" required>
            </div>
            <div class="am-input-group">
              <span class="am-input-group-label am-kai">&nbsp;&nbsp;轮播图排序号&nbsp;&nbsp;</span>
              <input type="number" class="am-form-field" placeholder="1~99，数值越大，轮播的位置越前" v-model="form.order" min="1" max="99" required>
            </div>
            <div class="am-input-group">
              <span class="am-input-group-label am-kai">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <select class="am-form-field" name='publicMode' v-model="form.state">
                <option value="0">不显示</option>
                <option value="1">显示</option>
              </select>
            </div>
            <div class="am-input-group">
              <span class="am-input-group-label am-kai">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <textarea v-model="form.desc" id="doc-vld-ta-1"></textarea>
            </div>
            <div class="am-input-group">
              <span class="am-input-group-label am-kai">轮播图点击链接</span>
              <input type="text" class="am-form-field" placeholder="请添加项目链接或自定义链接，如‘http://baidu.com’" v-model="form.link">
              <span class="am-input-group-btn">
                <button class="am-btn am-btn-default" type="button" @click="selectOneself"><i class="fa fa-times" aria-hidden="true"></i></button>
              </span>
              <span class="am-input-group-btn">
                <button class="am-btn am-btn-default" type="button" @click="selectProOpen">添加项目链接</button>
              </span>
            </div>
            <button id="submit" class="am-btn am-btn-secondary" type="submit" style="display:none;">提交</button>
          </form>
          <!-- form end -->
        </div>
      </div>
    </div>

    <div class="am-panel am-panel-default">
      <div class="am-panel-hd">
        <span class="am-panel-title" ><strong>轮播图片</strong></span>

        <span class="color-999 am-text-xs am-kai" data-am-collapse="{target: '#do-not-say-2'}"> - 点击展开/折叠</span>
      </div>
      <div id="do-not-say-2" class="am-panel-collapse am-collapse am-in">
        <div class="am-panel-bd">
          <up-file :imgPath="form.imgPath" @upFileSuccess="upFileSuccess"></up-file>
        </div>
      </div>
    </div>
    <alert :test="test"></alert>
    <confirm :show="confirm.show" :confirm="confirm" @onConfirm="onConfirm" @onCancel="onCancel"></confirm>
    <select-pro @selectProCheck="selectProCheck"></select-pro>
  </div>
</template>

<script>
  import * as apis from '../../../apis'
  export default {
    data () {
      return {
        id: this.$route.params.id || '',
        form: {name: '', state: '0', imgPath: '', link: '', desc: '', order: '', projectId: ''},
        test: '',
        confirm: {show: false},
        valid: false,
        selectProShow: false
      }
    },
    mounted () {
      let that = this
      $('#form').validator({
        // submit提交触发校验
        submit: function(e) {
          // 阻止提交按钮的默认 action
          e.preventDefault()
          let formValidity = this.isFormValid()
          that.valid = formValidity
        }
      })
      if (this.id) {
        apis.BannerInfo(this.id).then(({data: data}) => {
          if (data && data.result_code === 1 && data.result.BannerInfo) {
            this.form = data.result.BannerInfo
          } else { if (data.message) { this.test = data.message; $('#my-alert').modal('toggle') } }
        })
      }
    },
    methods: {
      upFileSuccess(path) {
        this.form.imgPath = path
      },
      selectProOpen () {
        $('#pro-popup').modal('toggle')
      },
      selectProCheck (list) {
        this.form.projectId = list._id
        this.form.link = `${process.env.WX_HOST.replace('{{eid}}', list.eid)}/wx/project/open/${list._id}`
      },
      selectOneself () {
        this.form.projectId = ''
        this.form.link = ''
      },
      onConfirm () {
        this.updateCall()
      },
      onCancel () {
        this.confirm.show = false
      },
      update () {
        this.confirm = {show: true, header: '数据保存确认窗', content: '您确认保存数据吗？'}
      },
      updateCall () {
        document.getElementById("submit").click()
        if (!this.valid) return
        if (!this.form.imgPath) {
          this.test = "轮播图不能为空！"
          $('#my-alert').modal('toggle')
          return
        }
        apis.addBanner(this.id, this.form).then(({data: data}) => {
          if (data && data.result_code === 1) {
            this.test = "数据保存成功！"
            $('#my-alert').modal('toggle')
            this.id = data.result.banner
        } else {
            this.test = "数据保存失败！"
            $('#my-alert').modal('toggle')
          }
        })
      }
    }
  }
</script>